<template>
  <div class="maven-guide">
    <a-spin :spinning="localLoading">
      <div class="maven-guide-header">
        <div
          class="maven-guide-header-btn"
          v-for="item in listBtn"
          :key="item.key"
          :class="{ 'maven-guide-header-btn-active': item.key === active }"
          @click="handleClick(item.key)"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="maven-guide-content">
        <div class="maven-guide-content-box" v-if="active === 'push'">
          <div class="guide-line">通过本指南快速设置仓库凭证，并完成制品文件的推送。</div>
          <div class="guide-title">步骤一：设置仓库凭证</div>
          <div class="guide-line">
            请在 <span class="guide-highlight">settings.xml</span> 文件
            <span class="guide-highlight">{{ `<servers></servers>` }}</span> 中设置以下仓库的访问凭证，通常
            <span class="guide-highlight">settings.xml</span> 在
            <span class="guide-highlight">$HOME/.m2/</span> 文件目录下。
          </div>
          <div class="guide-code">
            <codeView title="凭证" :code="voucher" :dataValues="voucherValue" :dataHides="voucherHide" />
          </div>
          <div class="guide-line">
            以上配置中的 username 和 password 为您的个人凭证，个人对仓库制品文件的操作权限根据仓库用户角色设置。
            为了您的仓库安全，用户名和密码已经隐藏。您可点击右上角直接复制，或者去除隐藏后手动复制。
          </div>
          <div class="guide-title">步骤二：制品上传配置</div>
          <div class="guide-line">
            请在 <span class="guide-highlight">settings.xml</span> 文件
            <span class="guide-highlight">{{ `<profiles></profiles>` }}</span> 中添加以下配置。
          </div>
          <div class="guide-code">
            <codeView title="配置" :code="stepTwoCode" :dataValues="stepTwoValue" />
          </div>
          <div class="guide-line">
            若您想将该制品仓库作为 release 库，用于存储功能趋于稳定、当前更新停止、可以用于发行的版本。则可以将
            <span class="guide-highlight">{{ ` <altDeploymentRepository> </altDeploymentRepository>` }}</span> 更换为
            <span class="guide-highlight"
              >{{ `<altReleaseDeploymentRepository></altReleaseDeploymentRepository>` }}</span
            >
            。
          </div>
          <div class="guide-line">
            若您想将该制品仓库作为 snapshot 库，用于存储不稳定、尚处于开发中的版本，即快照版本。则可以将
            <span class="guide-highlight">{{ `<altDeploymentRepository> </altDeploymentRepository>` }}</span> 更换为
            <span class="guide-highlight"
              >{{ `<altSnapshotDeploymentRepository></altSnapshotDeploymentRepository>` }}</span
            >
            。
          </div>
          <div class="guide-line">
            请在 settings.xml 文件
            <span class="guide-highlight">{{ `<activeProfiles></activeProfiles>` }}</span> 中添加以下配置。
          </div>
          <div class="guide-code"><codeView title="配置" :code="stepTwoEndCode" :dataValues="stepTwoValue" /></div>
          <div class="guide-title">步骤三：推送</div>
          <div class="guide-line">运行以下命令完成制品推送。</div>
          <div class="guide-code">
            <codeView title="推送命令" :code="stepThreeEndCode" />
          </div>
        </div>
        <div class="maven-guide-content-box" v-if="active === 'pull'">
          <div class="guide-line">通过本指南快速设置仓库凭证，并完成制品文件的拉取。</div>
          <div class="guide-title">步骤一：设置仓库凭证</div>
          <div class="guide-line">
            请在 <span class="guide-highlight">settings.xml</span> 文件
            <span class="guide-highlight">{{ `<servers></servers>` }}</span> 中设置以下仓库的访问凭证，通常
            <span class="guide-highlight">settings.xml</span> 在
            <span class="guide-highlight">$HOME/.m2/</span> 文件目录下。
          </div>
          <div class="guide-code">
            <codeView title="凭证" :code="pullCode" :dataValues="pullValues" :dataHides="pullHide" />
          </div>
          <div class="guide-line">
            以上配置中的 username 和 password 为您的个人凭证，个人对仓库制品文件的操作权限根据仓库用户角色设置。
            为了您的仓库安全，用户名和密码已经隐藏。您可点击右上角直接复制，或者去除隐藏后手动复制。
          </div>
          <div class="guide-title">步骤二：配置仓库和包信息</div>
          <div class="guide-line">
            在 <span class="guide-highlight">settings.xml</span> 文件
            <span class="guide-highlight">{{ `<repositories></repositories>` }}</span> 节点中加入对应的仓库使用地址。
          </div>
          <div class="guide-code">
            <codeView title="配置" :code="pullTwoCode" :dataValues="pullTwoValues" />
          </div>
          <div class="guide-line">
            若您的制品库仅存储 release 制品，可将
            <span class="guide-highlight">{{ `<snapshot></snapshot>` }}</span> 节点更改为 false。
          </div>
          <div class="guide-line">
            若您的制品库仅存储 snapshot 制品，可将
            <span class="guide-highlight">{{ `<release></release>` }}</span> 节点更改为 false。
          </div>
          <div class="guide-line">
            在你的
            <span class="guide-highlight">{{ `pom.xml` }}</span
            >文件<span class="guide-highlight">{{ `<denpendencies></denpendencies>` }}</span
            >节点中加入你要引用的文件信息。
          </div>
          <div class="guide-code">
            <codeView title="配置" :code="pullTwoEndCode" :dataValues="pullTwoEndValues" />
          </div>
          <div class="guide-title">步骤三：拉取</div>
          <div class="guide-line">运行以下命令完成制品拉取。</div>
          <div class="guide-code">
            <codeView title="拉取命令" :code="pullThreeCode" />
          </div>
        </div>
      </div>
    </a-spin>
  </div>
</template>

<script lang="ts" setup>
import { getRespositoryGuide } from '@/api/artifactRepository';
import { useArtifactRepositoryStore } from '@/store/modules/artifactRepository';
const artifactRepositoryStore = useArtifactRepositoryStore();
const { artifactObj } = artifactRepositoryStore;
import codeView from '../codeView.vue';
import * as CryptoUtils from '@/utils/cryptoUtils';
const listBtn = ref([
  {
    name: '推送',
    key: 'push',
  },
  {
    name: '拉取',
    key: 'pull',
  },
]);
interface CodeObjValue {
  serverId?: string;
  repoUserName?: string;
  repoPassword?: string;
  profileId?: string;
  repoAddress?: string;
  altReleaseDeploymentRepository?: string;
  groupId?: string;
  artifactId?: string;
  version?: string;
}
const active = ref<string>('');

// 推送-步骤一传参给codeView的可变字段
const voucherValue = ref<CodeObjValue>({
  serverId: '',
  repoUserName: '',
  repoPassword: '',
});
// 推送-步骤一可隐藏的字段
const voucherHide = ref<Array<string>>(['repoUserName', 'repoPassword']);
const voucher = ref<string>(`<servers>
<server>
  <id>{serverId}</id>
  <username>{repoUserName}</username>
  <password>{repoPassword}</password>
</server>
</servers>`);

// 推送-步骤二传参给codeView的可变字段
const stepTwoValue = ref<CodeObjValue>({
  altReleaseDeploymentRepository: '',
  profileId: '',
});
const stepTwoCode = ref<string>(`<profiles>
  <profile>
    <id>{profileId}</id>
    <properties>
      <altReleaseDeploymentRepository>
      {altReleaseDeploymentRepository}
      </altReleaseDeploymentRepository>
    </properties>
  </profile>
</profiles>`);

const stepTwoEndCode = ref<string>(`<activeProfiles>
  <activeProfile>{profileId}</activeProfile>
</activeProfiles>`);

// 推送-步骤三传参给codeView的可变字段
const stepThreeEndCode = ref<string>(
  `mvn clean install org.apache.maven.plugins:maven-deploy-plugin:2.8:deploy -DskipTests`,
);

// 拉取-步骤一传参给codeView的可变字段
const pullValues = ref<CodeObjValue>({
  serverId: '',
  repoUserName: '',
  repoPassword: '',
});
const pullHide = ref<Array<string>>(['repoUserName', 'repoPassword']);
const pullCode = ref<string>(`<servers>
<server>
  <id>{serverId}</id>
  <username>{repoUserName}</username>
  <password>{repoPassword}</password>
</server>
</servers>`);

// 拉取-步骤二传参给codeView的可变字段
const pullTwoValues = ref<CodeObjValue>({
  repoAddress: '',
  profileId: '',
});
const pullTwoCode = ref<string>(`<repositories>
  <repository>
    <id>{profileId}</id>
    <url>{repoAddress}</url>
    <releases>
      <enabled>true</enabled>
    </releases>
    <snapshots>
      <enabled>true</enabled>
    </snapshots>
  </repository>
</repositories>`);
const pullTwoEndValues = ref<CodeObjValue>({
  groupId: '',
  artifactId: '',
  version: '',
});
const pullTwoEndCode = ref<string>(`<dependencies>
  <dependency>
    <groupId>{groupId}</groupId>
    <artifactId>{artifactId}</artifactId>
    <version>{version}</version>
  </dependency>
</dependencies>`);

// 拉取-步骤三
const pullThreeCode = ref<string>('mvn install');
const localLoading = ref<boolean>(true);
const getGuide = async () => {
  localLoading.value = true;
  await getRespositoryGuide(artifactObj.uuid)
    .then((res) => {
      active.value = 'push';
      localLoading.value = false;
      voucherValue.value.serverId = res.serverId;
      voucherValue.value.repoUserName = res.repoUserName;
      voucherValue.value.repoPassword = CryptoUtils.decryptByRSA(res.repoPassword) || '';
      stepTwoValue.value.profileId = res.profileId;
      stepTwoValue.value.altReleaseDeploymentRepository = `${res.profileId}::${res.layoutId}::${res.repoAddress}`;
      pullValues.value.serverId = res.serverId;
      pullValues.value.repoUserName = res.repoUserName;
      pullValues.value.repoPassword = CryptoUtils.decryptByRSA(res.repoPassword) || '';
      pullTwoValues.value.repoAddress = res.repoAddress;
      pullTwoValues.value.profileId = res.profileId;
    })
    .finally(() => {
      active.value = 'push';
      localLoading.value = false;
    });
};

onBeforeMount(() => {
  getGuide();
});

const handleClick = (key: string) => {
  active.value = key;
};
</script>

<style scoped lang="less">
.maven-guide {
  width: 100%;
  .maven-guide-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    background: #fff;
    .maven-guide-header-btn {
      border-radius: 4px;
      padding: 5px 18px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      background: rgba(0, 0, 0, 0.03);
      color: rgba(0, 0, 0, 0.6);
      font-weight: 400;
    }
    .maven-guide-header-btn-active {
      background: rgba(37, 144, 255, 0.1);
      color: #2590ff;
    }
  }
  .maven-guide-content {
    height: calc(100vh - 280px);
    overflow-y: auto;
    width: calc(100% + 40px);
    padding-right: 34px;
    .maven-guide-content-box {
      margin-top: 16px;
      .guide-line {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 400;
        margin-top: 4px;
        width: 90%;
        word-break: break-all;
      }
      .guide-code {
        margin: 16px 0;
      }
      .guide-title {
        font-size: 16px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: 600;
        line-height: 24px;
        margin-top: 40px;
      }
      .guide-highlight {
        background: rgba(0, 171, 8, 0.1);
        color: rgba(0, 171, 8);
        border-radius: 4px;
        padding: 0 2px;
        font-weight: 500;
        word-break: break-all;
      }
    }
  }
}
</style>
